<script lang="ts">
import {defineComponent, PropType, computed} from 'vue'

/**
 * 渲染列表标签
 */
export default defineComponent({
  name: "ColumnLabels",
  props: {
    limit: {
      type: Number,
      defalut: 3,
    },
    labels: {
      type: Array as PropType<string[]>,
      required: true
    }
  },
  setup(props) {
    //实际显示的标签数
    const num = computed(() => {
      return props.limit > props.labels.length ? props.labels.length : props.limit;
    });

    /**
     * 更多数量
     */
    let more = computed(() => {
      return props.labels.length - num.value
    })

    return {
      num, more
    }
  }
})
</script>
<template>
  <el-space v-if="num>0" :size="2">
    <el-tag size="small" type="primary" v-for="(item,index) in num" :key="item">
      {{ labels[index] }}
    </el-tag>
    <el-popover title="全部标签" placement="top-start" :width="200" trigger="hover">
      <el-tag effect="dark" class="app-margin-left-tiny app-margin-bottom-tiny" size="small" type="primary" v-for="(item,index) in labels" :key="index">
        {{ item }}
      </el-tag>
      <template #reference>
        <el-tag size="small" class="app-tap" type="info" v-if="more>0">
          {{ more }}+
        </el-tag>
      </template>
    </el-popover>
  </el-space>
</template>